<template>
  <div class="hm-login">
    <div class="title">面经登录</div>
    <div class="user">
      <div class="name">用户名</div>
      <input
        type="text"
        placeholder="用户名"
        class="input"
        v-model="username"
      />
    </div>
    <div class="password">
      <div class="mima">密码</div>
      <input
        type="text"
        placeholder="密码"
        class="input1"
        v
        v-model="password"
      />
    </div>
    <button class="sub" @click="tijiao">提交</button>

    <div class="zhuce">
      <span class="kong"></span>
      <div @click="fn">注册账号</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async tijiao() {
      if (this.username == "" || this.password == "") {
        alert("请输入账号或密码");
      } else {
        try {
          const res = await axios({
            url: "http://interview-api-t.itheima.net/h5/user/login",
            method: "post",
            data: {
              username: this.username,
              password: this.password,
            },
          });
          //   console.log(res);
          if (res.data.code === 10000) {
            alert("登录成功");
            this.$router.push("/layout/article");
            localStorage.setItem("token", res.data.data.token);
          }
        } catch {
          alert("登录失败 请输入正确的账号或密码");
        }
      }
    },
    fn() {
      this.$router.push("/zhuce");
    },
  },
  name: "HmLogin",
};
</script>

<style lang="less" scoped>
.hm-login {
  //   width: 100%;
  height: 460px;
  //   background-color: pink;
  padding: 15px;
  //   margin: 10px;

  .title {
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    // background-color: white;
    margin-bottom: 5px;
    border-bottom: 1px solid #a6a8ac78;
  }

  .user {
    // width: 100%;
    display: flex;
    height: 100px;
    background-color: #fff;
    margin-bottom: 5px;
    border-bottom: 1px solid #a6a8ac78;

    .name {
      font-size: 30px;
      line-height: 100px;
      text-align: center;
      width: 150px;
      height: 100px;
      //   background-color: green;
      margin-right: 60px;
    }

    .input {
      width: 100%;
      //   background-color: yellow;
      font-size: 30px;
      border: none;
    }
  }
  .password {
    // width: 100%;
    display: flex;
    height: 100px;
    // background-color: #fff;
    margin-bottom: 5px;
    border-bottom: 1px solid #a6a8ac78;
    margin-bottom: 15px;

    .mima {
      font-size: 30px;
      line-height: 100px;
      text-align: center;
      width: 150px;
      height: 100px;
      //   background-color: green;
      margin-right: 60px;
    }

    .input1 {
      width: 100%;
      //   background-color: yellow;
      font-size: 30px;
      border: none;
    }
  }
  .sub {
    width: 100%;
    height: 100px;
    background-color: #e97637;
    margin-bottom: 5px;
    border: none;
    color: white;
    font-size: 30px;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .zhuce {
    // width: 100%;
    display: flex;
    align-items: center;
    // justify-content: center;
    height: 30px;
    background-color: #fff;
    margin-bottom: 5px;
    font-size: 20px;
    margin-right: 20px;
    color: #4175a0;

    .kong {
      flex: 1;
    }
  }
}
</style>
